﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>好用的数字滚动插件</title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
        name="viewport" />
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="Odometer.css" rel="stylesheet">
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .Odometer,
    .OdometerBg {
        margin: 40px;
    }

    .OdometerBg .number-animate .number-animate-dom,
    .OdometerBg .number-animate .number-animate-dot {
        width: 40px;
    }

    .OdometerBg .number-animate .number-animate-dot span {
        background: #222;
        color: yellow;
        border-left: 1px solid #fff;
    }

    .OdometerBg .number-animate .number-animate-dom {
        background: #222;
        color: yellow;
        border-left: 1px solid #fff;
    }
</style>

<body>
    <div class="Odometer"></div>
    <div class="Odometer2 OdometerBg"></div>
    <div class="Odometer3 OdometerBg"></div>
</body>
<script src="Odometer.js"></script>
<script>
    (function () {
        var num = 231365789, num2 = 345, num3 = 10
        var odo1 = new Odometer('.Odometer', {
            num: num
        });
        var odo2 = new Odometer('.Odometer2', {
            num: num2
        });
        var odo3 = new Odometer('.Odometer3', {
            num: num3
        });



        setInterval(() => {
            num += 117, odo1.update(num);

            num2 += 230, odo2.update(num2);
            num3 += 231, odo3.update(num3);
        }, 1300)
    })();
</script>

</html>